<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索================= -->
        <div class="filter-container">
          <el-form :model="ruleForm" label-width="80px" class="search">
            <el-form-item label="关键字">
              <el-input
                v-model="ruleForm.inputSearch"
                placeholder="根据编号搜索"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="clearFn">清除</el-button>
              <el-button type="primary" @click="searchFn">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 提示文本=============== -->
        <el-alert
          type="info"
          :closable="false"
          show-icon
          style="margin-bottom: 30px"
        >
          数据总共{{ counts }}条
        </el-alert>
        <!-- 表格信息 =================-->
        <el-table :data="tableData">
          <el-table-column label="编号" prop="id"></el-table-column>
          <el-table-column
            label="题型"
            prop="questionType"
            align="center"
            :formatter="formatQuestionType"
          ></el-table-column>
          <el-table-column label="题目编号">
            <template slot-scope="{ row }">
              <div v-for="(item, index) in row.questionIDs" :key="index" @click="msgFn(row.questionIDs)">
                <a href="#" style="color: rgb(0, 153, 255)">{{
                  item.number
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="录入时间"
            prop="addTime"
            align="center"
          ></el-table-column>
          <el-table-column
            label="答题时间(s)"
            prop="totalSeconds"
            align="center"
          ></el-table-column>
          <el-table-column
            label="正确率(%)"
            prop="accuracyRate"
            align="center"
          ></el-table-column>
          <el-table-column
            label="录入人"
            prop="userName"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button type="danger" circle @click="delFn(row.id)">
              <i class="el-icon-delete"></i>
            </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页========================= -->
        <el-pagination
          background
          :total="page.total"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="page.pagesize"
          :current-page="page.page"
          layout="prev,pager,next,sizes,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="text-align: right; margin-top: 20px"
        >
        </el-pagination>
      </el-card>
    </div>
    <!-- 预览组件 -->
      <questions-preview :dialogVisible="dialogVisible" @close="dialogVisible = false" :questionItem="questionItem"></questions-preview>
  </div>
</template>

<script>
// 引入 组题列表,组题列表删除 接口
import { randoms, removeRandoms } from '@/api/hmmm/questions'
// 引入 题型  枚举数据
import { questionType } from '@/api/hmmm/constants'
// 预览组件
import questionsPreview from '../components/questions-preview'

// 题库接口
import question from '@/api/hmmm1/questions'
export default {
  components: {
    questionsPreview
  },
  data () {
    return {
      id: '',
      dialogVisible: false,
      page: {
        page: 1,
        pagesize: 20,
        total: 0
      },
      questionType: [], // 枚举题型数据
      // 表单
      ruleForm: {
        inputSearch: ''
      },
      tableData: [], // 表格数据
      counts: '', // 总数据条数
      dataList: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      questionItem: {}// 传给子组件的当前试题
    }
  },
  created () {
    this.randoms()
    this.questionType = questionType
  },
  methods: {
    async randoms () {
      const { data } = await randoms({ ...this.dataList })
      this.tableData = data.items
      // console.log(this.tableData)
      this.counts = data.counts
      this.page.total = data.counts
      // this.page.page = Number(data.page)
      // this.page.pagesize = Number(data.pagesize)
    },
    formatQuestionType (row, column, cellValue, index) {
      // console.log(cellValue)
      const obj = this.questionType.find(
        (item) => item.value.toString() === cellValue
      )
      return obj ? obj.label : '未知数据'
    },
    clearFn () {
      this.ruleForm.inputSearch = ''
    },
    async searchFn () {
      // console.log(this.ruleForm.inputSearch)
      this.dataList.keyword = this.ruleForm.inputSearch
      // console.log(this.dataList.keyword)
      // const { data } = await randoms({ ...this.dataList })
      // this.tableData = data.items
      // this.counts = data.counts
      this.randoms()
    },
    // sizeChange (val) {
    //   console.log(val)
    //   this.dataList.pagesize = val
    //   this.randoms()
    // },
    // pageChange (page) {
    //   // console.log(page)
    //   this.dataList.page = page
    //   this.randoms()
    //   // console.log(data)
    // }
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.dataList.pagesize = val
      // 更新页面数据
      this.randoms()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.dataList.page = val
      // 更新页面数据
      this.randoms()
    },
    delFn (id) {
      // console.log(id)
      // 二次确认是否删除，弹框提示
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id: id })
        this.randoms()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async msgFn (questionIDs) {
      const id = questionIDs[0].id
      const { data } = await question.detail({ id })
      // 传给子组件数据
      this.questionItem = data
      // 展示弹层
      this.dialogVisible = true
      // console.log(this.id)
    }
  }
}
</script>

<style scoped>
.search {
  display: flex;
  justify-content: space-between;
}
</style>
